<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插入和替换操作</title>
		<!-- 插入和替换元素操作：针对元素增删改操作 
		append()            功能：在匹配元素集合中所有元素的内部末尾插入内容
		prepend()           功能：在匹配元素集合中所有元素的内部开头插入内容
		
		after()             功能：在匹配元素集合中所有元素的后面插入内容
		before()             功能：在匹配元素集合中所有元素的前面插入内容
		
		remove()            功能：移除匹配元素集合中所有的元素和子元素【盒子模型都删掉】只能删盒子里面的
		empty()             功能：清空匹配元素集合中所有的元素的内容【盒子模型不删掉】
		
		replaceWith()        
		-->
		<style>
			button{
				margin: 5px;
				padding: 10px 15px;
				cursor: pointer;
			}
			body{
				margin: 20px;
			}
			#target{
				border: 1px solid red;
				padding: 10px;
				margin-top: 10px;
				margin-left: 5px;
				padding:  10px;
				border-radius: 5px;
			}
			.a{
				
				width: 300px;
				height: 300px;
				border-radius:360px ;
				background:url(../img/钩子传说.png) ;
				background-size: 100%;
				color: transparent;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
	   <!-- html：7个按钮  div包含p包含：目标元素的初始段落 id="target"
	                      div包含p包含：插入新元素的初始段落 id="newElement" 隐藏
			css：按钮：外边距5px，内边距：10px 15px 鼠标移上去：手指
			    body：外边距20px
				#target：1像素边框、内边距：10px、上外边距：10px
	   -->	
	
	<button id="appendBtn">内部末尾插入元素</button>
	<button id="d1">内部开头插入元素</button>
	<button id="d2">外部后面插入元素</button>
	<button id="d3">外部前面插入元素</button>
	<button id="removeBtn">删除元素</button>
	<button id="emptyBtn">清空元素</button>
	<button id="replaceBtn">替换元素</button>
	<!-- 目标显示区域 -->
	<div id="target">
		<p>目标元素的初始段落</p>
		</div>
	<!-- 用于插入跟替换的区域 -->
	<div id="newElement" style="display: none;">
		<p>插入新元素的初始段落</p>
		</div>
	<script>
		/* 1.点击 内部末尾插入元素 按钮 p文本后面追加新元素中包含内容操作*/
		$("#appendBtn").click(function(){
			//效果：点击按钮 追加"新元素--自带内容"
			//1.1 追加内容是新元素---克隆--html结构全部复制出来，元素包含属性
		   var cpe=$("#newElement").clone();
			//clone() 创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
			//1.2 自带属性和属性值：隐藏---改成显示
			cpe.css("display","block");
			//1.3 将复制出来的新元素，追加给当前元素上
			$("#target").append(cpe);
		});
		/* 2. */
		$("#d1").click(function(){
			//效果：点击按钮 追加"新元素--自带内容"
			//1.1 追加内容是新元素---克隆--html结构全部复制出来，元素包含属性
		   var cpe=$("#newElement").clone();
			//clone() 创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
			//1.2 自带属性和属性值：隐藏---改成显示
			cpe.css("display","block");
			//1.3 将复制出来的新元素，追加给当前元素上
			$("#target").prepend(cpe);
		});
		/* 3. */
		$("#d2").click(function(){
			//效果：点击按钮 追加"新元素--自带内容"
			//1.1 追加内容是新元素---克隆--html结构全部复制出来，元素包含属性
		   var cpe=$("#newElement").clone();
			//clone() 创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
			//1.2 自带属性和属性值：隐藏---改成显示
			cpe.addClass("a");
			//1.3 将复制出来的新元素，追加给当前元素上
			$("#target").after(cpe);
		});
		/* 4.点击 外部前面插入元素 按钮  生成 圆形，保留背景色，文本不需要，
		                                 背景图 300*300 */
	$("#d3").click(function(){
		//效果：点击按钮 追加"新元素--自带内容"
		//1.1 追加内容是新元素---克隆--html结构全部复制出来，元素包含属性
	   var cpe=$("#newElement").clone();
		//clone() 创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
		//1.2 自带属性和属性值：隐藏---改成显示
		cpe.css({"width":"300px",
		         "height":"300px",
			     "background-color":"#ff0",
				 "border-radius":"50%",
				 "background":"url(../img/钩子传说.png)",
				 "background-size":"100%",
				 "color":"transparent",
				 "display":"block"
		});
		//1.3 将复制出来的新元素，追加给当前元素上
		$("#target").before(cpe);
	});
	
	/* 5.点击 删除元素 按钮 页面上所有元素包括子元素全部删除【盒子模型】 */
	$("#removeBtn").click(function(){
		$("#target").remove();
	});
	/* 6.点击 清空元素 按钮  页面上所有元素中内容全部删除 */
	$("#emptyBtn").click(function(){
		$("#target").empty();
	});
	/* 7.点击 替换元素 按钮 页面上目标元素替换为新元素 */
	$("#replaceBtn").click(function(){
		     //克隆  新元素  #newElement【父子级】
			var c=$("#newElement").clone();
			c.css("display","block");
			//替换 新元素 替换 目标元素
			$("#target").replaceWith(c);
	});
	</script>
	
	</body>
</html>